<template>
  <div class='staffRankTem' >
      <el-row class='first-title'>
        <div class="lf">
          <h3>人员职级</h3>
        </div>
        <search-box class="search" @getValue="getSearchText"></search-box>
      </el-row>
      <el-row class="third-card">
          <div class="table-container">
            <div class="handle-table">
                <div class="left">
                    <el-button-group>
                        <el-button icon="plus" @click="hrCreateClick">
                            创建
                        </el-button>
                        <el-button icon="delete" type="danger" @click="hrDeleteClick">
                            删除
                        </el-button>
                    </el-button-group>
                </div>
            </div>
            <el-table
                :data="hrTable.hrTableData"
                style="width: 100%"
                :row-class-name="handleRowClass"
                @selection-change='tableSelectionChange'
                >
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    v-for="column in hrTable.hrColumns"
                    :key='column.prop'
                    :prop='column.prop'
                    :label='column.label'
                    :width='column.width'
                    :formatter="column.formatter">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="160">
                    <template scope="scope">
                        <el-button
                            class="successBt"
                            @click="hrDetailClick(scope.row)"
                            type="text"
                            size="small">
                            详情
                        </el-button>
                        <el-button
                            @click="hrEditClick(scope.row)"
                            type="text"
                            size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationDiv">
                <my-pagination
                    :sizeChange='handleSizeChange'
                    :currentChange='handleCurrentChange'
                    :totals='pagination.total'>
                </my-pagination>
            </div>
         </div>
      </el-row>
      <el-dialog
        title="详情"
        :visible.sync="lookDialog.lookDialogVisible"
        width="50%"
        :lock-scroll='false'
        class="lookModal">
        <div>
            <ul>
                <li>
                    <div class="title">职级编号:</div>
                    <div class="value">{{lookDialog.lookForm.rankId}}</div>
                </li>
                <li>
                    <div class="title">职级名称:</div>
                    <div class="value">{{lookDialog.lookForm.rankName}}</div>
                </li>
            </ul>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="lookDialog.lookDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="editDialog.title"
        :visible.sync="editDialog.editDialogVisible"
        width="50%"
        :lock-scroll='false'
        class="editModal">
        <div class="editModalDiv">
           <el-form ref="form" :model="editDialog.editForm" label-width="80px">
                <el-form-item label="职级编号">
                    <el-input v-model="editDialog.editForm.rankId"></el-input>
                </el-form-item>
                <el-form-item label="职级名称">
                    <el-input v-model="editDialog.editForm.rankName"></el-input>
                </el-form-item>
           </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editHrSure">确 定</el-button>
            <el-button @click="editDialog.editDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import myPagination from '@/components/public/pagination'
import searchBox from '@/components/public/search-box'
import {
	MessageBox,
	Message,
	Button,
	ButtonGroup,
	Switch,
	Select,
	Input,
	Col,
	Row,
	Dialog,
	Checkbox,
	Radio,
	RadioGroup,
	RadioButton,
	Option,
	Table,
	TableColumn,
	Form,
	FormItem} from 'element-ui'
// Vue.use(MessageBox)
// Vue.use(Message)
Vue.use(Button)
Vue.use(ButtonGroup)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
Vue.use(Dialog)
Vue.use(Checkbox)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Option)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)

export default {
	data () {
		return {
			controlTableType: '',
			searchText: '',
			hrTable: {
				hrTableData: [],
				hrColumns: [
					{
						prop: 'rankId',
						label: '职级编号',
						width: '120'
					},
					{
						prop: 'rankName',
						label: '职级名称',
						width: ''
					}
				],
				tableSelections: [],
				hrRowData: {}
			},
			addTable: {
				addTableDataAll: [],
				addColumnsAll: [
					{
						prop: 'year1',
						label: '2015'
					},
					{
						prop: 'year2',
						label: '2016'
					},
					{
						prop: 'year3',
						label: '2017'
					}
				],
				addTableOffice: [],
				addColumnsOffice: [
					{
						prop: 'number',
						label: '编号',
						width: ''
					},
					{
						prop: 'china_name',
						label: '名称',
						width: '120'
					},
					{
						prop: 'type',
						label: '分类',
						width: '120'
					},
					{
						prop: 'unit',
						label: '单位',
						width: '120'
					},
					{
						prop: 'keep_valid',
						label: '保留小数位',
						width: '120'
					}
				]
			},
			pagination: {
				total: 0,
				pageSize: 10,
				pageNum: 1
			},
			editDialog: {
				editDialogVisible: false,
				editForm: {},
				title: '创建'
			},
			lookDialog: {
				lookDialogVisible: false,
				lookForm: {}
			}
		}
	},
	methods: {
		clearEditForm: function () {
			for (var key in this.editDialog.editForm) {
				this.editDialog.editForm[key] = ''
			}
		},
		tableSelectionChange: function (selection) {
			this.hrTable.tableSelections = selection
		},
		confirmModal: function (title, content, type, sureCB, cancelCB) {
			MessageBox.confirm(content, title, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: type ? type : 'warning'
			}).then(() => {
				if (sureCB) {
					sureCB()
				}
			}).catch(() => {
				if (cancelCB) {
					cancelCB()
				}
			})
		},
		// 获取表格数据
		getTableData: function () {
			var params = {
				search: this.searchText,
				pageSize: this.pagination.pageSize,
				pageNum: this.pagination.pageNum
			}
			this.ajaxPost('/perRank/queryList', params, this.getTableDataCB)
		},
		getTableDataCB: function (res) {
			if (res.data.status === 1) {
				this.hrTable.hrTableData = res.data.datas.showList
				this.pagination.total = res.data.total
			}
		},
		// 创建表格数据
		hrCreateClick: function () {
			this.editDialog.editDialogVisible = true
			this.clearEditForm()
			this.editDialog.title = '创建'
			this.controlTableType = 'create'
		},
		// 删除表格数据
		hrDeleteClick: function (row) {
			if (!this.hrTable.tableSelections.length) {
				return Message.error('请选择要删除的项!')
			}
			this.confirmModal('提示', '确定要删除吗?', '', this.hrDeleteSure)
		},
		hrDeleteSure: function () {
			var ids = []
			for (var i = 0; i < this.hrTable.tableSelections.length; i++) {
				ids.push(this.hrTable.tableSelections[i].id)
			}
			this.ajaxPost('/perRank/deletePerRank', { ids }, this.hrDeleteSureCB)
		},
		hrDeleteSureCB: function (res) {
			if (res.data.status === 1) {
				Message.success('删除成功!')
				this.getTableData()
			}
		},
		// 查看表格数据
		hrDetailClick: function (row) {
			this.controlTableType = 'look'
			this.ajaxPost('/perRank/queryDetail', { id: row.id }, this.hrDetailClickCB)
		},
		hrDetailClickCB: function (res) {
			if (res.data.status === 1) {
				if (this.controlTableType === 'look') {
					this.lookDialog.lookDialogVisible = true
					this.lookDialog.lookForm = res.data.datas.perRankDetail
				} else if (this.controlTableType === 'edit') {
					this.editDialog.title = '编辑'
					this.editDialog.editDialogVisible = true
					this.editDialog.editForm = res.data.datas.perRankDetail
					this.editDialog.editForm.enable = this.editDialog.editForm.enable === 1 ? true : false
				}
			}
		},
		// 编辑表格数据
		hrEditClick: function (row) {
			this.controlTableType = 'edit'
			this.ajaxPost('/perRank/queryDetail', { id: row.id }, this.hrDetailClickCB)
		},
		editHrSure: function () {
			var params = JSON.parse(JSON.stringify(this.editDialog.editForm))
			this.ajaxPost('/perRank/modifyPerRank', params, this.editHrSureCB)
		},
		editHrSureCB: function (res) {
			if (res.data.status === 1) {
				this.editDialog.editDialogVisible = false
				if (this.controlTableType === 'create') {
					Message.success('创建成功!')
				} else if (this.controlTableType === 'edit') {
					Message.success('编辑成功!')
				}
				this.getTableData()
			}
		},
		handleSizeChange: function (val) {
			this.pagination.pageSize = val
			this.getTableData()
		},
		handleCurrentChange: function (val) {
			this.pagination.pageNum = val
			this.getTableData()
		},
		getSearchText: function (text) {
			this.searchText = text.trim()
			var params = {
				search: this.searchText,
				pageSize: this.pagination.pageSize,
				pageNum: 1
			}
			this.ajaxPost('/perRank/queryList', params, this.getTableDataCB)
		},
		ajaxPost: function (url, params, callback) {
			var self = this
			this.Axios.Post(url, params)
				.then(function (res) {
					if (callback) {
						callback(res, self)
					}
				})
		}
	},
	computed: {
	},
	filters: {
	},
	mounted: function () {
		this.getTableData()
	},
	components: {
		myPagination,
		searchBox
	},
	watch: {
	}
}
</script>

<style scoped>
.staffRankTem .first-title {
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  height: 60px;
  line-height: 58px;
  padding: 0 20px;
}

.staffRankTem .first-title h3 {
  font-size: 14px;
  font-weight: 700;
  color: #6c6a6c;
}
.staffRankTem .first-title .search {
  float: right;
}
.staffRankTem .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 50px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
  color: #444;
  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  font-weight: 400;
}
.staffRankTem .table-container {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
  background-color: #fff;
  padding: 0 10px;
  min-height: 400px;
}
.staffRankTem .handle-table {
  clear: both;
  padding: 20px 20px 30px 20px;
  border-bottom: 1px solid #dfe6ec;
}
.staffRankTem .selectSet {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  position: relative;
  clear: both;
}
.staffRankTem .selectSet .default {
  float: left;
  background-color: #f4f4f4;
  color: #444;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.staffRankTem .selectSet .alt {
  margin-right: -1px;
}
.staffRankTem .selectSet a:hover {
  z-index: 4;
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.staffRankTem .selectSet .alt {
  margin-right: -1px;
}

.staffRankTem .selectSet .default:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.staffRankTem .selectSet .default:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.staffRankTem .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.staffRankTem .third-card .collapse-card .collapse-container {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.staffRankTem .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0px;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
.staffRankTem .totalNum {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  position: relative;
}
.staffRankTem .paginationDiv {
  padding: 10px 0;
  margin-top: 20px;
}
.lookModal li {
  padding: 10px 40px 10px 20px;
}
.lookModal .title {
  float: left;
  width: 90px;
  text-align: right;
  font-weight: bold;
}
.lookModal .value {
  margin-left: 100px;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  min-height: 24px;
  position: relative;
  top: 12px;
}
.editModal .editModalDiv {
  padding: 0 40px 0 20px;
}
</style>
<style>

</style>
